
<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="200px"><zs-fl-selector @chooseZsfl="handleZsfl"></zs-fl-selector></el-aside>
      <el-container>
        <el-header>
          <el-form :inline="true" class="demo-form-inline">
            <el-form-item>
              <el-input v-model="queryData.keyWord" placeholder="关键词" @keyup.enter="getDataList()"/>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="getDataList()">
                查询
              </el-button>
              <el-button type="default" @click="resetData()">清空</el-button>
            </el-form-item>
          </el-form>
        </el-header>
        <el-main><el-table :data="tableData" ref="multipleTableRef" border stripe style="width: 100%"
            highlight-current-row>
            <el-table-column type="selection" width="55" />
            <el-table-column label="序号" width="70" align="center">
              <template #default="{ $index }">
                {{ (pageIndex - 1) * pageSize + $index + 1 }}
              </template>
            </el-table-column>
            <el-table-column label="知识库标题" width="180" align="center">
              <template #default="scope">
                <el-popover effect="light" trigger="hover" placement="top" width="auto">
                  <template #default>
                    <div>问题类型: {{ scope.row.wtlx }}</div>
                    <div>问题场景: {{ scope.row.wtcj }}</div>
                  </template>
                  <template #reference>
                    {{ scope.row.zsbt }}
                  </template>
                </el-popover>
              </template>
            </el-table-column>
            <el-table-column prop="wtnr" label="问题内容" width="220" align="center"/>
            <el-table-column prop="hdnr" label="回答内容" width="220" align="center"/>
            <el-table-column prop="shixsj" label="下线时间" width="160" align="center"/>
            <el-table-column fixed="right" label="操作" width="200" align="center">
              <template #default="scope">
                <el-button v-permission="'knowledge.detail'" @click="$router.push({ name: '知识详情', params: { id: scope.row.id } })">
                    详情
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex"
            :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="total"
            layout="total, sizes, prev, pager, next, jumper" />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import {
  getMyListApi,
} from '@/api/knowledgeBase/knowledge.js'

import {
  ElInput,
  ElTable,
} from 'element-plus'

import ZsFlSelector from '@/views/common/ZsFlSelector.vue'
const multipleTableRef = ref<InstanceType<typeof ElTable>>()
const pageIndex = ref(1)
const pageSize = ref(10)
const total = ref(0)
const tableData = ref([])
const queryData = reactive({
  keyWord: '',
  zsfl: undefined
})


// 点击分类
const handleZsfl = (zsflId: number) => {
  queryData.zsfl = zsflId

  console.log("知识分类为" + zsflId)
  // 触发查询
  getDataList()
}


// 修改每页数
const sizeChangeHandle = val => {
  pageSize.value = val
  pageIndex.value = 1
  getDataList()
}
// 修改当前页
const currentChangeHandle = val => {
  pageIndex.value = val
  getDataList()
}

// 重置查询条件
const resetData = () => {
  queryData.keyWord = '' 
  queryData.zsfl = undefined
  getDataList()
}

// 获取表格数据
const getDataList = () => {
  getMyListApi({
    page: pageIndex.value,
    limit: pageSize.value,
    keyWord: queryData.keyWord,
    zsflId: queryData.zsfl,
    status: "2", // 写死为查询已下线的
  }).then(res => {
    tableData.value = res.data.list
    total.value = res.data.totalCount
  })
}
defineExpose({
  getDataList
});
getDataList()
</script>